<template>
	<view class="box" :style="theme">
		<view class="selectPlace flex-cb" @click="jump2('/pages/venue/siteReservation?type=2')">
			<view class="c2 f32 fwb">选择约球场区</view>
			<u-icon name="arrow-right" size="40rpx" color="#666"></u-icon>
		</view>
		<!-- 场地信息 -->
		<view class="placeMessage">
			<view class="c2 f32 fwb">场地信息</view>
			<view class="flex-left mt40 common">
				<view class="c6 f30">活动场馆</view>
				<view class="ml32 c2 f30">{{ venueName }}</view>
			</view>
			<view class="flex-left mt40 common">
				<view class="c6 f30">活动项目</view>
				<view class="ml32 c2 f30">{{ hdxm || '请先选择约球场区' }}</view>
			</view>
			<view class="flex-left mt40 common">
				<view class="c6 f30">活动场地</view>
				<view class="ml32 c2 f30" style="flex: 1;">
					<input type="text" v-model="cdname" maxlength="100" placeholder="请先选择约球场区" style="width: 100%;" />
				</view>
			</view>
			<view class="flex-left mt40 common" style="border:none;">
				<view class="c6 f30">人数上限</view>
				<view v-if="rsxz && rsxz >= 1" class="ml32 c2 f30">{{rsxz}}人</view>
				<view v-else class="ml32 c2 f30">无限制</view>
			</view>
		</view>

		<!-- 活动信息 -->
		<view class="placeMessage">
			<view class="c2 f32 fwb">活动信息</view>
			<view class="flex-left mt40 common">
				<view class="c6 f30">活动人数</view>
				<input v-model="numLow" placeholder="最小人数" type="number" class="minPeople ml32"></input>
				<view class="cut-off"></view>
				<input v-model="numUp" placeholder="最大人数" type="number" class="minPeople"></input>
			</view>
			<view class="flex-left mt40 common">
				<view class="c6 f30">活动日期</view>
				<view class="ml32 c2 f30">{{fullDate || '请先选择约球场区'}}</view>
			</view>
			<view class="flex-left mt40 common">
				<view class="c6 f30">活动时间</view>
				<view class="ml32 c2 f30">{{fullTime || '请先选择约球场区'}}</view>
			</view>
			<view class="flex-left mt40 common" @click="xzDate">
				<view class="c6 f30">报名截止</view>
				<view class="ml32 c2 f30">{{dateLimit || '请选择截止时间'}}</view>
				<view class="flex-1"></view>
				<u-icon name="arrow-right" size="40rpx" color="#666"></u-icon>
			</view>
			<view class="flex-left mt40 common" style="border:none;align-items: flex-start;">
				<view class="c6 f30">活动说明</view>
				<textarea placeholder="活动说明，300字以内" v-model="info" class="activeState ml32" maxlength="300"></textarea>
			</view>
		</view>
		<view class="box_mode">
			<view class="cf f30 payButton" @click="$noMultipleClicks(submit)">提交订单</view>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" :maxDate="maxDate" mode="datetime"
			@cancel="cancel" @confirm="confirm"></u-datetime-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				noClick: true,
				show: false,
				hdxm: '',
				cdname: '',
				rsxz: '',
				numLow: '',
				numUp: '',
				fullDate: '',
				fullTime: '',
				dateLimit: '',
				info: '',
				value1: Number(new Date()),
				minDate: new Date('1920/01/01').getTime(),
				maxDate: Number(new Date()),
				cont: {}
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad(options) {
			if (options.hdxm) {
				let date = options.fullDate + ' ' + options.beginTime + ':00'
				this.hdxm = options.hdxm
				this.value1 = Date.parse(date.replace(/-/g, "/")) - 3600000
				this.dateLimit = this.formatDate(Date.parse(date.replace(/-/g, "/")) - 3600000)
				this.maxDate = Date.parse(date.replace(/-/g, "/")) - 3600000,
				this.beginTime = options.beginTime
				this.endTime = options.endTime
				this.rsxz = Number(options.rsxz)
				this.projectId = options.xmid
				this.fullDate = options.fullDate
				this.cdname = options.cdname
				this.price = options.price
				this.fullTime = options.beginTime + '-' + options.endTime,
				this.siteIds = options.siteIds.split(',')
				this.numLow = 1
			}
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			xzDate() {
				this.show = true
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.dateLimit = this.formatDate(e.value)
			},
			// 提交订单
			submit() {
				if (!this.maxDate) return this.$app.showToast('请先选择约球场区')
				if (!this.cdname) return this.$app.showToast('请输入场地')
				if (!this.numLow) return this.$app.showToast('请输入活动最小人数')
				if (!this.numUp) return this.$app.showToast('请输入活动最大人数')
				if (this.numLow < 1) return this.$app.showToast('最小人数最少为1')
				if (this.numLow > this.numUp) return this.$app.showToast('活动最小人数不能大于活动最大人数')
				if (this.rsxz && this.numUp > this.rsxz) return this.$app.showToast('活动人数不能大于人数限制')
				if (!this.dateLimit) return this.$app.showToast('请选择截止时间')
				this.$app.ajax({
					api: this.$api.startMeet(),
					data: {
						userId: this.userInfo.id,
						param: {
							amot: this.price,
							beginTime: this.beginTime,
							date: this.fullDate,
							dateLimit: this.dateLimit,
							endTime: this.endTime,
							numLow: this.numLow,
							numUp: this.numUp,
							payType: '01',
							projectId: this.projectId,
							siteIds: this.siteIds,
							venueId: this.venueId,
							info: this.info
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.jump3('/pages/order/pay?type=1&businessId=', res.record.reserveId)
					}
				}).catch(() => {})
			},
			formatDate(date) {
				let _date = new Date(parseInt(date));
				let y = _date.getFullYear();
				let m = _date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				let d = _date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = _date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let minute = _date.getMinutes();
				let second = _date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				// console.log( y + '-' + m + '-' + d + ' ' + '　' + h + ':' + minute + ':' + second) 
				let dates = y + '-' + m + '-' + d + ' ' + h + ':' + minute;
				return dates;
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.activityInfoMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							activityId: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.selectPlace {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.placeMessage {
		padding: 40rpx 30rpx 10rpx 30rpx;
		background-color: #fff;
		margin-top: 24rpx;

		.common {
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #E5E5E5;
		}

		.minPeople {
			width: 240rpx;
			height: 55rpx;
			text-align: center;
			line-height: 55rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			border: 1rpx solid #EEEEEE;
		}

		.cut-off {
			width: 16rpx;
			height: 1rpx;
			background-color: #333;
			margin: 0 10rpx;
		}
	}

	.box_mode {
		background: #ffffff;
		padding: 30rpx 30rpx 0rpx 30rpx;
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;

		.payButton {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background-color: $color;
			border-radius: 50rpx;
			text-align: center;
			margin: 60rpx 0;
		}
	}

	.activeState {
		width: 474rpx;
		height: 280rpx;
		background-color: #F7F7F7;
		border: 1rpx solid #EEEEEE;
		padding: 30rpx;
	}
</style>
